<template>
  <div class="GykjMap-rusticate">
    <div class="GykjMap-rusticate-table">
      <table border class="table">
        <tbody>
          <tr>
            <td>村居名称</td>
            <td>{{fliterData('name')}}</td>
            <td>户数</td>
            <td>{{fliterData('door_num')}}</td>
          </tr>
          <tr>
            <td>人口</td>
            <td>{{fliterData('person_num')}}</td>
            <td>面积（平方米）</td>
            <td>{{fliterData('area')}}</td>
          </tr>
          <tr>
            <td>农田数（亩）</td>
            <td>{{fliterData('farm_num')}}</td>
            <td>房屋数</td>
            <td>{{fliterData('house_num')}}</td>
          </tr>
          <tr>
            <td>描述</td>
            <td>{{fliterData('description')}}</td>
            <td>监测人名</td>
            <td>{{fliterData('monitor_name')}}</td>
          </tr>
          <tr>
            <td>监测人联系方式</td>
            <td>{{fliterData('monitor_phone')}}</td>
            <td>监测主要迹象</td>
            <td>{{fliterData('monitor_obj')}}</td>
          </tr>
          <tr>
            <td>监测方法和手段</td>
            <td>{{fliterData('monitor_method')}}</td>
            <td>预报判据</td>
            <td>{{fliterData('yubao_basic')}}</td>
          </tr>
          <tr>
            <td>村级责任人</td>
            <td>{{fliterData('resp_village')}}</td>
            <td>村级责任人联系方式</td>
            <td>{{fliterData('resp_village_phone')}}</td>
          </tr>
          <tr>
            <td>撤离路线</td>
            <td>{{fliterData('leave_path')}}</td>
            <td>镇级责任人</td>
            <td>{{fliterData('resp_town')}}</td>
          </tr>
          <tr>
            <td>镇级责任人联系方式</td>
            <td>{{fliterData('resp_town_phone')}}</td>
            <td>区三防值班电话</td>
            <td>{{fliterData('resp_area_phone')}}</td>
          </tr>
          <tr>
            <td>安置地点</td>
            <td>{{fliterData('install_place')}}</td>
            <td>安置责任人</td>
            <td>{{fliterData('install_name')}}</td>
          </tr>
          <tr>
            <td>安置责任人联系方式</td>
            <td>{{fliterData('install_phone')}}</td>
            <td>救护单位</td>
            <td>{{fliterData('rescue_place')}}</td>
          </tr>
          <tr>
            <td>救护责任人</td>
            <td>{{fliterData('rescue_name')}}</td>
            <td>救护责任人联系方式</td>
            <td>{{fliterData('rescue_phone')}}</td>
          </tr>
          <tr>
            <td>电话</td>
            <td>{{fliterData('telephone')}}</td>
            <td>镇</td>
            <td>{{fliterData('town')}}</td>
          </tr>
          <tr>
            <td>经度</td>
            <td>{{fliterData('lng')}}</td>
            <td>纬度</td>
            <td>{{fliterData('lat')}}</td>
          </tr>
          <tr>
            <td>社区名</td>
            <td>{{fliterData('community')}}</td>
            <td>注意事项</td>
            <td>{{fliterData('note')}}</td>
          </tr>
        </tbody>
      </table>
      <div class="a">
        <div class="title">预案路径:</div>
        <div class="content">
          <a :href="fliterData('plan_path')">{{fliterData('plan_path')}}</a>
        </div>
      </div>
      <div class="a">
        <div class="title">预案文件名:</div>
        <div class="content" v-html="fliterData('plan_name')"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {}
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterDouData (key) {
      const arr = key.split('.')

      if (this.resultData[arr[0]] === undefined) {
        this.resultData[arr[0]] = {}
      }

      return this.resultData[arr[0]][arr[1]] || '--'
    },
    initData (data = {}) {
      this.resultData = data
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-rusticate {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 5px;
  overflow: auto;
  .GykjMap-rusticate-table {
    width: 100%;
    height: 100%;
    .table {
      width: 100%;
      font-size: 14px;
      border: 1px solid #ddd;
      td {
        width: 25%;
        padding: 5px;
      }
    }
    .a {
      display: flex;
      align-items: center;
      font-size: 12px;
      padding: 5px;
      .title {
        width: 70px;
        margin-right: 5px;
        text-align: right;
      }
      .content {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
